import { any } from "prop-types";
import React, { useContext } from "react";
import SortableDecorator from "../design/DesignDecorator";
import { Empty } from "antd";

export const SchemaFieldContext = React.createContext<any>({
  components: {},
  Decorator: null,
});
const DefaultDecorator = ({ children }) => {
  return <div className="schema-field-decorator">{children}</div>;
};
export const SchemaFieldProvider = ({ Decorator,items,setItems, children, components }) => {
  return (
    <SchemaFieldContext.Provider
      value={{
        Decorator: Decorator ? Decorator : DefaultDecorator,
        items,
        setItems,
        components,
      }}
    >
      {children}
    </SchemaFieldContext.Provider>
  );
};

const SchemaField = ({ item, items, index,sortable }: any) => {
  const { components, Decorator } = useContext(SchemaFieldContext);
  if (!item.properties) {
    return  <Decorator key={item._id} item={item}><Empty /></Decorator>
  }
  const XComponent = components[item.properties["x-component"]];
  const xProps = item.properties["x-component-props"];
  return (
    <Decorator index={index} sortable={sortable} key={item._id} item={item}>
      <XComponent {...xProps} />
    </Decorator>
  );
  
};
export default SchemaField;
